<template>
	<view>
		<view class="reportbox page">
			<view class="_flex align-items_center report_tit">
				<image src="../../static/cljbxx.png" class="titleImg" mode="aspectFit"></image>
				<view class="">
					车辆报告
				</view>
			</view>
			<view class="">
				<u-table padding='24rpx' border-color="#d8d8d8" font-size="28" color="color: #2C2C2C;">
					<u-tr class="u-tr">
						<u-td class="u-td aaa">品牌型号</u-td>
						<u-td class="u-td">{{carInfo.brand_name}}</u-td>
					</u-tr>
					<u-tr class="u-tr">
						<u-td class="u-td aaa">款型</u-td>
						<u-td class="u-td">{{carInfo.series_name}}</u-td>
					</u-tr>
					<u-tr class="u-tr">
						<u-td class="u-td aaa">VIN</u-td>
						<u-td class="u-td">{{carInfo.vin}}</u-td>
					</u-tr>
					<u-tr class="u-tr">
						<u-td class="u-td aaa">生产日期</u-td>
						<u-td class="u-td">{{carInfo.production_year}}</u-td>
					</u-tr>
				</u-table>
			</view>
			<view v-if="!carInfo" class="noMessage">
				<!-- <u-loading mode="flower" size="50"></u-loading> -->
			</view>
		</view>
		
		<!-- - -->
		<!-- 关键指标评估 -->
		<view class="reportbox page">
			<view class="_flex align-items_center report_tit">
				<image src="../../static/gjzbpg.png" class="titleImg" mode="aspectFit"></image>
				<view class="">
					关键指标评估
				</view>
			</view>
			<view class="">
				<view class="table" style="padding-top: 0;">
					<u-table padding='24rpx' border-color="#d8d8d8" font-size="28" color="color: #2C2C2C;">
						<u-tr class="u-tr">
							<u-th width="40%" class="u-td nameTd">指标</u-th>
							<u-th class="u-td deId">评估数据</u-th>
							<u-th class="u-td deId">新车初始数据</u-th>
						</u-tr>
						<u-tr class="u-tr" v-for="item in indexEvaluations">
							<u-td width="40%" class="u-td nameTd">{{item.index}}</u-td>
							<u-td class="u-td deId">{{item.evaluations}}</u-td>
							<u-td class="u-td deId">{{item.newCarData}}</u-td>
						</u-tr>
					</u-table>
				</view>
			</view>
			<view v-if="indexEvaluations.length == 0" class="noMessage">
				<!-- <u-loading mode="flower" size="50"></u-loading> -->
			</view>
		</view>
		<!-- - -->

		<!-- 综合车况评级 -->
		<view class="reportbox page">
			<view class="_flex align-items_center report_tit">
				<image src="../../static/zhckpg.png" class="titleImg" mode="aspectFit"></image>
				爱买车综合车况评级
				<!-- <view class="report_tit_r" style="color: #888;">
					评级规则
				</view> -->
			</view>
			<view class="" style="padding: 40rpx 45rpx;">
				<!-- <u-steps :list="numList" active-color="#FD7E6E" :current="accidentGrade" mode="dot"></u-steps> -->
				<view class="jdtList">
					<view>
						<view :class="accidentGrade==1?'act':''"></view>
						<text :class="accidentGrade==1?'act1':''">优</text>
					</view>
					<view class="xian"></view>
					<view>
						<view :class="accidentGrade==2?'act':''"></view>
						<text :class="accidentGrade==2?'act1':''">良</text>
						
					</view>
					<view class="xian"></view>
					<view>
						<view :class="accidentGrade==3?'act':''"></view>
						<text :class="accidentGrade==3?'act1':''">中</text>
					</view>
					<view class="xian"></view>
					<view>
						<view :class="accidentGrade==4?'act':''"></view>
						<text :class="accidentGrade==4?'act1':''">差</text>
					</view>
				</view>
			</view>
		</view>

		<view class="reportbox page">
			<view class="_flex align-items_center report_tit">
				<image src="../../static/ybwxls.png" class="titleImg" mode="aspectFit"></image>维修信息
				<!-- <view class="report_tit_r" style="color: #888;">
					规则说明
				</view> -->
			</view>
			<view class="repair">
				<view >
					<u-table padding='24rpx' border-color="#d8d8d8" font-size="28" color="color: #2C2C2C;">
						<u-tr class="u-tr">
							<u-th class="u-td">受损部位</u-th>
							<u-th class="u-td">维修内容</u-th>
						</u-tr>
						<u-tr class="u-tr" v-for="(item,index) in repairHistory" :key="index">
							<u-td class="u-td">{{item.compName}}</u-td>
							<u-td class="u-td">{{item.repairItems}}</u-td>
						</u-tr>
					</u-table>
				</view>
			</view>
			<view>
				<view  style="margin-top: 40rpx;">
					<u-table padding='24rpx' border-color="#d8d8d8" font-size="28" color="color: #2C2C2C;">
						<view v-for="(item,index) in mtnceRecord" :key="index">
							<u-tr class="u-tr">
								<u-th class="u-td">时间：{{item.date}}</u-th>
								<u-th class="u-td">里程：{{item.mile}}公里</u-th>
							</u-tr>
							<u-tr class="u-tr">
								<u-td class="u-td td1">
									<view>项目：{{item.detail}}</view>
									<view>材料：{{item.other}}</view>
								</u-td>
							</u-tr>
						</view>
					</u-table>
				</view>
			</view>

			<view v-if="repairHistory.length == 0 && mtnceRecord.length ==0" class="noMessage">
				<!-- <u-loading mode="flower" size="50"></u-loading> -->
			</view>

		</view>

		<view class="reportbox page">
			<view class="_flex align-items_center report_tit">
				<image src="../../static/jllcfx.png" class="titleImg" mode="aspectFit"></image>
				里程记录分析

				<!-- <view class="report_tit_r" style="color: #888;">
					规则说明
				</view> -->
			</view>
			<view v-if="mileageRecords.length ==0">
				<view class="" style="padding:0 0 32rpx 0;font-size: 28rpx;">
					<view class="sjyc"><text class="actives">0项异常</text>,该车里程记录没有发现异常
					</view>
				</view>
			</view>
			<view class="" v-if='mileageRecords.length > 0'>
				<u-table  padding='20rpx' font-size="30" color="#2c2c2c">
					<u-tr>
						<u-th>时间</u-th>
						<u-th>里程（公里）</u-th>
					</u-tr>
					<u-tr v-for="(item,index) in mileageRecords" :key="index">
						<u-td>{{item.date}}</u-td>
						<u-td>{{item.mile}}</u-td>
					</u-tr>
				</u-table>
			</view>
		</view>


		<view>
			<u-modal v-model="modalShow" :content="modalContent" show-confirm-button @confirm="modalconfirm"></u-modal>
		</view>


	</view>
</template>

<script>
	import API from "@/api/report.js"
	export default {
		onLoad(options) {
			console.log(options);
			this.orderNo = options.orderNo;
		},
		onShow() {
			this.getzhckReport()
		},
		data() {
			return {
				modalShow: false,
				modalContent: "",
				orderNo: "",
				carInfo: null,
				indexEvaluations: [],
				mileageRecords: [],
				mtnceRecord: [],
				repairHistory: [],
				accidentGrade: "2",
				numList: [{
					name: '优'
				}, {
					name: '良'
				}, {
					name: '中'
				}, {
					name: '差'
				}, ],

				form: {},
				timer: null,

			};
		},
		methods: {
			getzhckReport() {
				let data = {
					orderNo: this.orderNo
				}
				API.getzhckReport(data).then(res => {
					console.log(res)
					if (res.data && res.code == 200) {
						this.carInfo = res.data.carInfo;
						this.indexEvaluations = res.data.indexEvaluations;
						this.mileageRecords = res.data.mileageRecords;
						this.mtnceRecord = res.data.mtnceRecord;
						this.repairHistory = res.data.repairHistory;
						console.log(res.data.accidentGrade)
						// if (res.data.accidentGrade == 'A') {
						// 	this.accidentGrade = 0
						// }
						// if (res.data.accidentGrade == 'B') {
						// 	this.accidentGrade = 1
						// }
						// if (res.data.accidentGrade == 'C') {
						// 	this.accidentGrade = 2
						// }
						// if (res.data.accidentGrade == 'D') {
						// 	this.accidentGrade = 3
						// }
						for (let i in this.mtnceRecord) {
							this.mtnceRecord[i].detailall = "项目：" + this.mtnceRecord[i].detail + "<br/> " + "材料：" + this.mtnceRecord[i].other

						}
						console.log("this.mtnceRecord");
						console.log(this.mtnceRecord);
					}
					if (res.code == 203) {
						this.modalShow = true;
						this.modalContent = res.message
					}
					if (res.code == 201) {
						this.$u.toast('报告获取中，请稍等');
						this.goon();
					}

				})
			},
			goon() {
				var that = this;
				console.log("timer");
				console.log(typeof(that.timer));
				console.log(that.timer);
				if (that.timer && that.timer < 150) {
					that.timer = null;
				}
				if (!that.timer) {
					that.timer = setTimeout(() => {
						let data = {
							orderNo: this.orderNo
						}
						API.getzhckReport(data).then(res => {
							console.log(res)
							if (res.data && res.code == 200) {
								that.carInfo = res.data.carInfo;
								that.indexEvaluations = res.data.indexEvaluations;
								that.mileageRecords = res.data.mileageRecords;
								that.mtnceRecord = res.data.mtnceRecord;
								that.repairHistory = res.data.repairHistory;
								if (res.data.accidentGrade == 'A') {
									this.accidentGrade = 1
								}
								if (res.data.accidentGrade == 'B') {
									this.accidentGrade = 2
								}
								if (res.data.accidentGrade == 'C') {
									this.accidentGrade = 3
								}
								if (res.data.accidentGrade == 'D') {
									this.accidentGrade = 4
								}
								clearTimeout(that.timer)
							}
							if (res.code == 203) {
								that.modalShow = true;
								that.modalContent = res.message
								clearTimeout(that.timer)
							}
							if (res.code == 201) {
								that.goon();
							}
						})
					}, 2000)
				}
				if (that.timer > 200) {
					console.log("该停下来了")
					clearTimeout(that.timer)
					that.modalShow = true;
					that.modalContent = "未查询到相关记录"
				}
			},
			modalconfirm() {
				uni.navigateBack({
					delta: 1
				})
			}
		},
	}
</script>
<style scoped lang="scss">
	.aaa{
		background: #F4F6F8 !important;
		color: #2C2C2C;
		font-weight: 550;
	}
	.jdtList{
		display: flex;
		justify-content: space-between;
		view{
			view{
				width: 15rpx;
				height: 15rpx;
				background: #D8D8D8;
				border-radius: 50%;
				margin: auto;
				margin-bottom: 10rpx;
			}
		}
	}
	.act{
		width: 20rpx !important;
		height: 20rpx !important;
		background: #FD7E6E !important;
	}
	.act1{
		color: #FD7E6E !important;
	}
	.xian{
		width: 100rpx;
		height: 2rpx;
		margin-top: 10rpx;
		background: #D8D8D8;
	}
	.align-items_center{
		height: 90rpx;
	}
	.reportbox {
		padding: 24rpx;
		    box-sizing: border-box;
		    margin: 5rpx 0;
		    font-size: 30rpx;
		    overflow: hidden;

		.report_tit {
			font-weight: bold;
			position: relative;
			margin-bottom: 12rpx;

			.report_tit_r {
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		.report_bigimg {
			width: 100%;
			height: 200rpx;
			border-radius: 10rpx;
		}
	}

	/* 时间轴 */
	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}

	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}

	.u-order-desc text.more {
		color: #002B56;
		margin-left: 10rpx;
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}

	.title {
		color: #002B56;
		font-size: 46rpx;
		font-weight: bold;
		padding-left: $uni-widthspace;
		box-sizing: border-box;

	}

	.titleImg {
		width: 34rpx;
		height: 34rpx;
		margin-right: 22rpx;
	}

	.carBaseName {
		color: #888;
		display: inline-block;
		width: 200rpx;
	}

	.batteryBox {
		width: 50%;
		line-height: 52rpx;
	}

	.dataBgColDark {
		background-color: #002A58;
		height: 50rpx;
		line-height: 50rpx;
		color: #fff;
		text-align: center;
	}

	.dataBgCol {
		background-color: #E5E5E5;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
	}

	.repair {
		width: 100%;
		margin-bottom: 10rpx;

		.repair_list {
			width: 100%;
			position: relative;
			display: flex;
			align-items: center;
			padding: 15rpx 0;

			.repair_num {
				width: 32rpx;
				height: 32rpx;
				border-radius: 50%;
				background-color: #002a58;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				margin-right: 10rpx;
				margin-left: 6rpx;
			}

			.repair_desc {
				position: absolute;
				right: 0;
				top: 10rpx;
				color: #002a58;
			}
		}
	}

	.noMessage {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.mtnceRecord {
		width: 100%;
		height: auto;
	}
	
	.td1{
		view:nth-child(1){
			text-align: left;
		}
		view:nth-child(2){
			text-align: left;
			margin-top: 16rpx;
		}
	}
	.sjyc{
		background: #FFF6EF;
		width: 100%;
		height: 62rpx;
		text-align: center;
		line-height: 62rpx;
	}
	.actives{
		font-family: PingFangSC-Medium;
		font-size: 28rpx;
		color: #F17210;
	}
</style>
